<script setup>
import * as echarts from 'echarts';
import { onMounted, ref, watch } from 'vue';

const props = defineProps({
    data: {
        type: Array,
        default: () => []
    }
})

let yData = [];
const option = {
    grid: {
        left: '5%',
        right: '5%',
        top: '5%',
        bottom: '5%',
        containLabel: true
    },
    tooltip: {
        trigger: 'item',
        formatter: function (parms) {
            return parms.marker + " " + parms.name + "：" + parms.value + "万元";
        }
    },
    xAxis: {
        type: 'category', // category(坐标轴类型)
        data: ['0410', '0402', '0403', '0404'],
        axisTick: { // 坐标轴刻度相关配置
            show: false // 是否显示坐标轴刻度
        },
        axisLine: { // 坐标轴轴线相关配置
            show: false, // 是否显示坐标轴轴线
            lineStyle: { // 坐标轴轴线样式
                color: 'rgba(rgba(17, 48, 104, 1))' // 坐标轴轴线颜色
            }
        },
        axisLabel: { // 坐标轴刻度标签相关配置
            color: '#ffffff',
            fontSize: 13,
            margin: 20
        },
        splitLine: { // 分隔线相关设置
            show: true,// 是否显示分隔线
            lineStyle: { // 分隔线样式设置
                color: '#19294f', // 颜色
                type: 'solid', // 类型，可选值为'solid'、'dotted'、'dashed'
                width: 1 // 线宽
            }
        }
    },
    yAxis: [
        {
            min: 0,
            max: 20000,
            interval: 5000,
            type: 'value', // value(数值轴,适用于连续数据)
            axisTick: { // 坐标轴刻度相关配置
                show: false  // 是否显示坐标轴刻度
            },
            axisLine: { // 坐标轴轴线相关配置
                show: true, // 是否显示坐标轴轴线

                lineStyle: {
                    color: '#17264a', // 轴线颜色
                    width: 2, // 轴线宽度
                    type: 'solid' // 轴线类型
                }
            },
            axisLabel: { // 坐标轴刻度标签相关配置
                color: '#ffffff',
                fontSize: 12,
                formatter: (value, index) => {
                    const arry = ['0', '5000', '10000', '15000', '20000']
                    return arry[index]
                },
            },
            splitLine: { // 坐标轴在 grid 区域中的分隔线
                show: false,
                lineStyle: { // 分割线配置
                    color: 'rgba(255,255,255,0.15)' // 分割线颜色
                }
            }
        },
        {
            min: 0,
            max: 100,
            interval: 25,
            type: 'value', // value(数值轴,适用于连续数据)
            axisTick: { // 坐标轴刻度相关配置
                show: true  // 是否显示坐标轴刻度
            },
            axisLine: { // 坐标轴轴线相关配置
                show: true, // 是否显示坐标轴轴线
                lineStyle: {
                    color: '#17264a', // 轴线颜色
                    width: 2, // 轴线宽度
                    type: 'solid' // 轴线类型
                }
            },
            axisLabel: { // 坐标轴刻度标签相关配置
                // color: '#ffffff',
                fontSize: 13,
                formatter: (value, index) => {
                    const arry = ['0', '25', '50', '75', '100']
                    return arry[index]
                },
                textStyle: {
                    color: '#fff'
                }
            },
            splitLine: { // 坐标轴在 grid 区域中的分隔线
                lineStyle: { // 分割线配置
                    color: 'rgba(255,255,255,0.15)' // 分割线颜色
                }
            }
        },
    ],

    series: [

        // 底部的椭圆形(象形柱图):pictorialBar
        {
            type: "pictorialBar", // pictorialBar(象形柱图)
            label: { // 图形上的文本标签,可用于说明图像的一些数据信息,比如值,名称等
                show: true, //是否显示标签
                position: ['17', '-30'], // 标签的位置(可以是绝对的像素值或者百分比['50%','50%',也可以是top,left等])
                color: '#01E4FF',
                fontSize: 14
            },
            symbolSize: [30, 20], // 图形的大小用数组分别比表示宽和高,也乐意设置成10相当于[10,10]
            symbolOffset: [0, 10], // 图形相对于原本位置的偏移
            z: 12, // 象形柱状图组件的所有图形的 z 值.控制图形的前后顺序.z 值小的图形会被 z 值大的图形覆盖.
            itemStyle: { // 图形样式
                // echarts.graphic.LinearGradient(echarts内置的渐变色生成器)
                // 4个参数用于配置渐变色的起止位置,这4个参数依次对应右 下 左 上
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    // 这里 offset: 0 1 ,表示从下往上的渐变色
                    {
                        offset: 0, // 0%处的颜色
                        color: "rgba(3, 153, 255,1)"
                    },
                    {
                        offset: 1, // 100%处的颜色
                        color: "rgba(0, 115, 249,1)"
                    }
                ])
            },
            data: yData
        },
        // 中间的长方形柱状图(柱状图):bar
        {
            type: 'bar', // 柱状图
            barWidth: 30, // 柱条的宽度,不设时自适应
            barGap: '0%', // 柱子与柱子之间的距离
            itemStyle: { // 图形样式
                // color支持(rgb(255,255,255)、rgba(255,255,255,1)、#fff,也支持渐变色和纹理填充)
                // 下面就是使用线性渐变
                color: {
                    "x": 0,
                    "y": 0,
                    "x2": 0,
                    "y2": 1,
                    "type": "linear",
                    "global": false,
                    "colorStops": [{
                        "offset": 0, // 0%处的颜色
                        "color": "rgba(0,229,255,0.5)"
                    }, {
                        "offset": 1, // 100%处的颜色
                        "color": "#1F9BFF"
                    }]
                }
            },
            data: yData
        },
        // 顶部的椭圆形(象形柱图):pictorialBar
        {
            type: "pictorialBar",
            symbolSize: [30, 20],
            symbolOffset: [0, -10],
            z: 12,
            symbolPosition: "end",
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: "rgba(0, 93, 217,1)"
                    },
                    {
                        offset: 1,
                        color: "rgba(0,229,255,1)"
                    }
                ], false)
            },
            data: yData
        },
        {
            name: '销量', // 每个系列的名称，对应于图例中的显示文字
            type: 'line', // 系列类型为折线图
            data: yData,// 数据数组，需与xAxis的data数组长度相等
            itemStyle: { // 折线样式设置
                color: '#266ab3',
                borderColor: '#ff6600',
                borderWidth: 2
            }
        }
    ]
}
const month = ref(null); // dom元素
let myChart = null
const chartInit = () => {
    myChart = echarts.init(month.value);
    myChart.setOption(option);
}
// 基于准备好的dom，初始化echarts实例
//在onMunted中初始化echarts实例
onMounted(() => {
    chartInit();
})
// 监听数据变化
watch(() => props.data, () => {
    resetCharts() // 数据变化重置图表
})
// 根据数据重置图表
const resetCharts = () => {
    // option.xAxis[0].data = props.data.map(item => item.entryDate.replace('-', ''))
    // option.series[0].data = props.data.map(item => item.qty)
    myChart.setOption(option)
}
window.addEventListener("resize", () => {
    myChart.resize();
});
</script>
<template>
    <div class="month" ref="month"></div>
</template>
<style scoped>
.month {
    width: 100%;
    height: 220px;
    margin: 0;
    position: relative;
    left: -15px;
}
</style>